<template>
  <div>
    <!-- 1.导航 -->
   <ul class='nav'>
        <slot></slot>
   </ul>
    <!-- 2.内容 说明：内容的数据 来自 tab组件 内部数据 或者是slot里面 -->
    <div class="content">
        <Content :wrapper='wrapper'/>
    </div>
  </div>
</template>

<script>
import Content from './Content';
export default {
  name: "Tabs",
  data(){
      return {
          wrapper:[],//容器
      }
  },
  props:{
      currentIndex:{
          type:[String,Number],
          default:0
      }
  },
  //定义一个方法--获取参数index
  methods:{
      changeIndex(val){
          console.log(val);
          this.$emit('changeTab',val)
      }
  },
  created(){//获取slot容器的数据 传递给子组件 context 
  // 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
      console.log('slot数据--',this.$slots.default);
      this.wrapper=this.$slots.default;
  },
  components:{
      Content
  },
  //render函数-- 
    render(){
        return (
            <div>
                <div class="nav">
                    {this.$slots.default}
                </div>
                <Content contentData={this.contentData}/>
            </div>
        )
    }
};
</script>

<style scoped>
.nav {
  display: flex;
  list-style: none;
  background: #fff;
}
.nav li {
  flex: 1;
  text-align: center;
  padding-bottom: 0.12rem;
  font-size: 0.32rem;
}
.nav .active {
    color: rgb(3, 151, 77);
  border-bottom: 2px solid rgb(3, 151, 77);
}
</style>